<template>
  <div align="center">
    <el-card class="box-card">
      <div slot="header" class="clearfix" style="line-height: 40px">
        <span style="float: left">查看盘点详情</span>
        <el-button style="float: right;margin-right: 20px " type="success" plain @click="returnto()">返回</el-button>
      </div>
      <div>
        <el-form ref="form" :model="form" label-width="80px" style="float: left">
          <el-form-item label="盘点单号" style="float: left">
            <el-input v-model="form.num"></el-input>
          </el-form-item>
          <el-form-item label="盘点人" style="float: left">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="创建时间" style="float: left">
            <el-input v-model="form.date"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div  style="width: 100%;margin: auto">
        <el-row :gutter="24">
          <el-col :span="10" style="line-height: 40px"><div class="grid-content bg-purple">
            处方类别
            <el-select v-model="value" filterable placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
                <span style="float: left">{{ item.label }}</span>
                <span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>
              </el-option>
            </el-select>
          </div></el-col>
          <el-col :span="8" style="line-height: 40px"><div class="grid-content bg-purple">
            <el-input placeholder="请输入内容" v-model="input_search" class="input-with-select">
              <el-button slot="append" icon="el-icon-search"></el-button>
            </el-input>
          </div></el-col>
        </el-row>
      </div>
      <div>
        <el-table
          :data="druginfo"
          :header-cell-style="{background:'#5ddcf6',color:'#0a0a0d','text-align':'center','line-height': '40px'}"
          style="width: 100%;"
          :cell-style="{'text-align':'center'}">>
          <el-table-column
            type="index"
            width="50">
          </el-table-column>

          <el-table-column
            prop="drugId"
            label="药品编号"
            width="120">
          </el-table-column>

          <el-table-column
            prop="name"
            label="药品名称"
            width="180">
          </el-table-column>

          <el-table-column
            prop="localtionNumber"
            label="货位号"
            width="100">
          </el-table-column>

          <el-table-column
            prop="kind"
            label="处方类别"
            width="100">
          </el-table-column>

          <el-table-column
            prop="specification"
            label="规格"
            width="100">
          </el-table-column>

          <el-table-column
            prop="manufacturer"
            label="生产厂家"
            width="180">
          </el-table-column>

          <el-table-column
            prop="repertory"
            label="当前库存量"
            width="80">
          </el-table-column>

          <el-table-column
            prop="repertoryItem"
            label="盘点库存"
            width="80">
          </el-table-column>
          <el-table-column
            prop="repertoryIO"
            label="盘盈盘亏"
            width="80">
          </el-table-column>
          <el-table-column
            prop="beizhu"
            label="备注"
            width="80">
          </el-table-column>
        </el-table>
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage4"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="10"
            layout="total, sizes, prev, pager, next, jumper"
            :total="10">
          </el-pagination>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        options: [{
          value: '选项1',
          label: '全部'
        }, {
          value: '选项2',
          label: '西/成药'
        }, {
          value: '选项3',
          label: '中药'
        }],
        input_search: '',
        form: {},
        druginfo:[],
        currentPage4: 4,
      }
    },
    methods: {
      onSubmit() {
        console.log('submit!');
      },
      returnto(){
        this.$router.push("/drugStockTaking")
      },
      handleClick(tab, event) {
        console.log(tab, event);
      },
      //分页
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      },
      findAll:function () {
        this.druginfo=[{
          drugId:1111,
          name:1111,
          kind:1111,
          classify:1111,
          specification:1111,
          formulation:1111,
          invoice:1111,
          permitNo:1111,
          manufacturer:1111,
          isOtc:1111,
          status:1111,
          time:'2019-02-09 10:23:56',
          packingUnit:1111,
          factor:1111,
          units:1111,
          doseFactor:1111,
          doseUnit:1111,
          purchasePrice:1111,
          retailPrice:1111,
          attribute1:1111,
          attribute2:1111,
          id:111,
          repertory:1111,
          localtionNumber:2222,
          repertoryItem:222,
          repertoryIO:'-2',
          beizhu:''

        }]
      }
    },
    mounted(){
      this.findAll();
    }
  }
</script>

<style>
  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .box-card {
    width: 75%;

  }
</style>
